<template>
	<view class="container">
		<view :class="[index == 0 ? 'bgpvip' : 'bgsvip' ,bg]">
			<view class="d-flex bgvip just-content-center align-items-center flex-column">
				<view class="h-100 w-100 vip">
					<image src="../../static/images/mine/bgvip.png" mode=""></image>
					<view class="svip">
						<image src="../../static/images/mine/svip.png" mode=""></image>
						<view class="wkt">
							<text v-if="!index">{{!index && isLogin && member.vip ? '已开通' : '未开通'}}</text>
							<text v-if="index">{{index && isLogin && member.svip ? '已开通' : '未开通'}}</text>
						</view>
						<view class="sq">
							<text>预计每年可以节省{{payPrice*12}}元</text>
						</view>
						<view class="yxq">
							<text v-if="!index && member.vip && isLogin">{{timestampToTime(member.vip_endtime*1000)}}</text>
							<text v-if="index && member.svip && isLogin">{{timestampToTime(member.svip_endtime*1000)}}</text>
						</view>
						<view class="svipt">
							<image src="../../static/images/mine/svipt.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		 <view class="content">
		        <aloys-tab :tabs="tabs" @change="onTabChange">
					<view slot="content0" class="type-vip">
						<view :class="[vipcontent,{actioncontent:i==ins}]" v-for="(item,i) in viplist" :key="i" @tap="active(item,i)">
							<view :class="[top,{activetop:i==ins}]">
								<text>{{item.name}}</text>
							</view>
							<view class="footer">
								<view class="yh" v-if="item.yh"><text>{{item.yh}}</text></view>
								<view class="nyh" v-else><text></text></view>
								<view class="price"><text class="sym">￥</text><text>{{item.price}}</text></view>
								<view class="oprice"><text>原价￥{{item.old_price}}</text></view>
							</view>
						</view>
					</view>
		        </aloys-tab>
		    </view>
			
			<view class="action">
				<view class="item" v-for="(item,i) in actionList" :key="i">
					<view class="img"><image :src="src+item.src"  mode=""></image></view>
					<view class="text"><text>{{item.name}}</text></view>
				</view>
			</view>
			
			
			<view class="btn">
				<button type="primary" size="default" class="login-btn" lang="zh_CN" @tap="pay">
					立即支付 {{payPrice}}元
				</button>
			</view>
		
	</view>
	
</template>

<script>
	import aloysTab from "@/components/aloys-tab/aloys-tab.vue"
	import {mapState, mapGetters} from 'vuex'
	
	export default {
		components: { aloysTab },
		data() {
			return {
				tabs: [{
					title: '普通会员'
				},{
					title: '超级会员'
				}],
				ins:0,
				top:'top',
				vipcontent:'vip-content',
				actionList:[{src:'mlz.png',name:'魅力值'},{src:'hyj.png',name:'会员价'},{src:'hyr.png',name:'会员日'},{src:'srl.png',name:'生日礼'}],
				src:'../../static/images/mine/',
				index:0,
				bg:'bg d-flex',
				viplist:[],
				payPrice:0,
				id:1
			}
		},
		computed: {
			...mapState(['member']),
			...mapGetters(['isLogin'])
		},
		onShow() {
			this.getData()
		},
		methods: {
			onTabChange(e) {
				this.index = e
				this.ins = 0
				this.getData()
			},
			active(item,num) {
				this.ins = num
				this.payPrice = item.price
				this.id = item.id
			},
			getData(){
				this.$http.get('vip/list', {params: {type:this.index+1}}).then(res => {
					this.viplist = res.data.data
					this.payPrice = res.data.data[0].price
					this.id = res.data.data[0].id
					
				}).catch(err => {
				
				})
			},
			pay(){
				//微信支付
				this.$http.post('/vip/pay', {id:this.id}).then(res => {
					let result = res.data.data //接口返回数据
						// console.log(res)
					// console.log(reson.provider[0])
					uni.showLoading({}) //拉起支付加载提示
					if (res.data.code == 1) {
						uni.hideLoading()
						uni.requestPayment({
							provider: result.provider,
							timeStamp: result.timeStamp,
							nonceStr: result.nonceStr,
							package: result.package,
							signType:  result.signType,
							paySign:  result.paySign,
							success: () => {
								uni.removeStorageSync('cart')
								uni.hideLoading()
								uni.reLaunch({
									url: '/pages/index/index'
								})
							},
							fail: function (err) {
								// uni.switchTab({
								// 	url:'/pages/mine/mine'
								// })
								// console.log('fail:' + JSON.stringify(err));
							},complete(res) {
								// console.log('complete:' + JSON.stringify(res));
							}
						});
					}else{
						uni.showToast({
							title:res.data.msg,
							icon:'none'
						})
					}
					// console.log(res.data.data)
					// uni.hideLoading()
				}).catch(err => {
				
				})
			},
			timestampToTime (cjsj) {
			        var date = new Date(cjsj) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
			        var Y = date.getFullYear() + '/'
			        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '/'
			        var D = date.getDate() + ' '
			        var h = date.getHours() + ':'
			        var m = date.getMinutes() + ':'
			        var s = date.getSeconds()
			        return Y+M+D
			    },
		}
	}
</script>


<style lang="scss">
	.container{
		overflow: hidden;
		height: auto;
	}
	.bgpvip{
		background-image: url(../../static/images/mine/bg.png);
	}
	.bgsvip{
		background-image: url(../../static/images/mine/vipbg.png);
	}
	.bg{
		height: 400rpx;
		.bgvip{
			width: 90%;
			height: 300rpx;
			.vip{
				position: relative;
				top: 34%;
				left: 6%;
				.svip{
					height: 60rpx;
					width: 220rpx;
					position: absolute;
					top: 44rpx;
					left: 30rpx;
					color: #be8a52;
					.wkt{
						width: 3rem;
						position: absolute;
						top: 50rpx;
						left: 200rpx;
					}
					.sq{
						width: 500rpx;
						position: absolute;
						top: 186rpx;
					}
					.yxq{
						width: 6.5rem;
						position: absolute;
						top: 186rpx;
						left: 450rpx;
					}
					.svipt{
						width: 250rpx;
						height: 200rpx;
						position: absolute;
						left: 386rpx;
						top: -30rpx;
					}
				}
			}
		}
	}
	image{
		height: 100%;
		width: 100%;
	}
	.type-vip{
		overflow-x: auto;
		white-space: nowrap;
		background: #fff;
		margin-top: 30rpx;
		padding-bottom: 35rpx;
		.vip-content{
			width: 230rpx;
			height: 300rpx;
			border: 5rpx solid #F4F4F4;
			background: #FFFFFF;
			margin-top: 30rpx;
			display: inline-block;
			margin-left: 20rpx;
			.top{
				height: 80rpx;
				background: #f4f4f4;
				text-align: center;
				line-height: 80rpx;
			}
			.activetop{
				background: #ffec86;
			}
			.footer{
				.yh{
					height: 60rpx;
					text-align: center;
					line-height: 60rpx;
					background: #f4635c;
					margin-top: 10rpx;
					color: white;
					width: 80%;
					margin-left: 10%;
					border-radius: 10rpx;
				}
				.nyh{
					height: 60rpx;
					text-align: center;
					line-height: 60rpx;
					margin-top: 10rpx;
					width: 80%;
					margin-left: 10%;
					border-radius: 10rpx;
				}
				.price{
					height: 30rpx;
					text-align: center;
					margin-top: 25rpx;
					font-size: 1.5rem;
					.sym{
						height: 10rpx;
					}
				}
				.oprice{
					height: 30rpx;
					text-align: center;
					margin-top: 45rpx;
					font-size: 20rpx;
					color: #999790;
				}
			}
		}
		.actioncontent{
			border: 5rpx solid #ffecb6;
			background: #fefbec;
		}
	}
	.action{
		height: 250rpx;
		background: #fff;
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: flex-end;
		.item{
			.img{
				height: 100rpx;
				width: 100rpx;
			}
			.text{
				margin-top: 20rpx;
			}
		}
	}
	.btn{
		width: 100%;
		align-items: center;
		background: #fff;
		height: 300rpx;
		display: flex;
		.login-btn{
			width: 500rpx;
			margin: auto;
		}
	}
</style>
